<template>
  <view >
    <view class="form_active_title">“告诉我，你想找什么样的工作？”</view>
	<view class="form-line u-border-bottom" @click="showPickerDistrict = true">
		<view class="form-field">
			<view class="label">
				期望地区
			</view>
			<view :class="districtName ? 'text' : 'text ac'">
				{{districtName ? districtName : '点击选择期望地区'}}
			</view>
		</view>
		<u-icon class="arrow-icon" name="arrow-right"></u-icon>
	</view>
    
    <u-popup
	   v-model="showPickerDistrict"
	   mode="bottom"
	   width="100%"
	   height="900rpx"
	   ref="dropDistrict"
    >
      <DistrictFilter
        :districts="[district1, district2, district3]"
        :type="false"
        @doSelect="doSelectDistrict"
      ></DistrictFilter>
    </u-popup>
	<view class="form-line u-border-bottom" @click="showPickerJobCategory = !showPickerJobCategory">
		<view class="form-field">
			<view class="label">
				期望职位
			</view>
			<view :class="categoryName ? 'text' : 'text ac'">
				{{categoryName ? categoryName : '点击选择期望职位'}}
			</view>
		</view>
		<u-icon class="arrow-icon" name="arrow-right"></u-icon>
	</view>
    
    <u-popup
      v-model="showPickerJobCategory"
      mode="bottom"
	  width="100%"
	  height="900rpx"
      ref="dropCategory"
    >
      <JobCategoryFilter
        :categories="[category1, category2, category3]"
        :type="false"
        @doSelect="doSelectCategory"
        :all="false"
      ></JobCategoryFilter>
    </u-popup>
	<view class="form-line u-border-bottom" @click="showPickerWage = !showPickerWage">
		<view class="form-field">
			<view class="label">
				期望薪资
			</view>
			<view :class="wageName == '点击选择薪资' ? 'text' : 'text ac'">
				{{wageName ? wageName : '点击选择薪资'}}
			</view>
		</view>
		<u-icon class="arrow-icon" name="arrow-right"></u-icon>
	</view>
    <!-- <u-picker v-model="showPickerWage" :default-selector="defaultWageAry" mode="multiSelector" :range="columnsWage" @confirm="onConfirmWage"  @columnchange="onChangeWage" @cancel="showPickerWage = false" /> -->
	<u-select
	:default-value="defaultWageAry"
	v-model="showPickerWage" 
	mode="mutil-column-auto" 
	:list="columnsWage" 
	@confirm="onConfirmWage"
	@cancel="showPickerWage = false" 
	>
	</u-select>
    <view style="margin: 32rpx;">
      <u-button type="primary" shape="circle" @click="handleSubmit">
        下一步
      </u-button>
    </view>
	<u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import JobCategoryFilter from '@/components/JobCategoryFilter'
import DistrictFilter from '@/components/DistrictFilter'
export default {
  name: 'RegIntStep2',
  components: {
    JobCategoryFilter,
    DistrictFilter
  },
  created () {
    this.$store.dispatch('getClassify', 'citycategory')
    this.$store.dispatch('getClassify', 'jobcategory')
    this.$store.dispatch('getClassifyWage')
  },
  computed: {
    columnsWage () {
		var classifyWage1 = this.$store.state.classifyWage
		var index1 = 0
		var list1 = []
		for (let key in classifyWage1) {
			index1++
			list1.push({
				value: index1,
				label: key,
				children2:classifyWage1[key]
			})
		}
		for (var i = 0; i < list1.length; i++) {
			let children = list1[i].children2
			let item = list1[i]
			if(children.length > 0){
				var item2 = []
				for (var i2 = 0; i2 < children.length; i2++) {
					item2.push({
						value: item.value + '-' + (i2 + 1),
						label: children[i2],
					}) 
					list1[i].children = item2
				}
			} else {
				list1[i].children = []
			}
		}
		return list1
    //   return [
		  // Object.keys(this.$store.state.classifyWage),
		  // this.$store.state.classifyWage[500] 
    //   ]
    }
  },
  data () {
    return {
      category1: '',
      category2: '',
      category3: '',
      categoryName: '',
      minwage: '',
      maxwage: '',
      wageName: '',
      district1: '',
      district2: '',
      district3: '',
      districtName: '',
      showPickerDistrict: false,
      showPickerJobCategory: false,
      showPickerWage: false,
	  defaultWageAry:[0,0]
    }
  },
  methods: {
    doSelectCategory (data) {
      this.category1 = data[0]
      this.category2 = data[1]
      this.category3 = data[2]
      this.categoryName = data[3]
      this.showPickerJobCategory = !this.showPickerJobCategory
    },
    doSelectDistrict (data) {
      this.district1 = data[0]
      this.district2 = data[1]
      this.district3 = data[2]
      this.districtName = data[3]
      this.showPickerDistrict = !this.showPickerDistrict
    },
	// 选择期望薪资
	onConfirmWage(values) {
		var [columnObj1,columnObj2] = values
		this.minwage = parseInt(columnObj1.label)
		this.maxwage = parseInt(columnObj2.label)
		this.wageName = `${parseInt(columnObj1.label)}-${parseInt(columnObj2.label)}元`
		for (var i = 0; i < this.columnsWage.length; i++) {
			let item = this.columnsWage[i]
			if(columnObj1.label == item.label){
				for (var i2 = 0; i2 < item.children.length; i2++) {
					let item2 = item.children[i2]
					if(columnObj2.label == item2.label){
						this.defaultWageAry = [i,i2]
					}
				}
			}
		}
		this.showPickerWage = !this.showPickerWage
	},
   //  onConfirmWage (values) {
	  // let [index1,index2] = values
   //    this.minwage = parseInt(this.columnsWage[0][index1])
   //    this.maxwage = parseInt(this.columnsWage[1][index2])
   //    this.wageName = `${parseInt(this.columnsWage[0][index1])}-${parseInt(this.columnsWage[1][index2])}元`
   //    this.showPickerWage = !this.showPickerWage
   //  },
  //   onChangeWage (picker) {
		// let {column,index} = picker
		// this.$set(this.defaultWageAry,column,index)
		// if(column == 0){
		// 	this.$set(this.columnsWage,1,this.$store.state.classifyWage[this.columnsWage[column][index]])
		// 	this.$set(this.defaultWageAry,1,0)
		// 	this.$forceUpdate()
		// }
  //   },
    onConfirmJobCategory (values, index) {
      let jobCategory = this.$store.state.classifyJobCategory
      this.category1 = jobCategory[index[0]].id
      this.category2 = jobCategory[index[0]].children[index[1]].id
      this.category3 =
        jobCategory[index[0]].children[index[1]].children[index[2]].id
      this.categoryName = `${values}`
      this.showPickerJobCategory = !this.showPickerJobCategory
    },
    onConfirmDistrict (value) {
      this.district1 = value[0].code
      this.district2 = value[1].code
      this.district3 = value[2].code
      this.districtName = `${value[0].name}/${value[1].name}/${value[2].name}`
      this.showPickerDistrict = !this.showPickerDistrict
    },
    handleSubmit () {
      if (!this.district1) {
		this.$refs.uTips.show({
			title: '请选择期望地区',
			type: 'error'
		})
        return false
      }
      if (!this.category1) {
		this.$refs.uTips.show({
			title: '请选择期望职位',
			type: 'error'
		})
        return false
      }
      if (!this.minwage || !this.maxwage) {
		this.$refs.uTips.show({
			title: '请选择期望薪资',
			type: 'error'
		})
        return false
      }
      http.post(api.reg_resume_int_step2, {
        category1: this.category1,
        category2: this.category2,
        category3: this.category3,
        minwage: this.minwage,
        maxwage: this.maxwage,
        district1: this.district1,
        district2: this.district2,
        district3: this.district3
      })
        .then(res => {
          uni.navigateTo({
          	url:'/personal/AddResumeByInteractive/RegIntStep3'
          })
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped></style>
